<script setup>
import { onMounted, ref } from "vue";
import HomePanel from "./HomePanel.vue";
import { getNewAPI } from "@/apis/home";
const newList = ref([]);
const getNewList = async () => {
  const res = await getNewAPI();
  newList.value = res.result;
};
onMounted(() => {
  getNewList();
});
const handleNewList = () => {
  if (!newList.value) {
    return [];
  } else {
    return newList.value;
  }
};
</script>
<template>
  <HomePanel title="新鲜好物" sub-title="新鲜出炉&nbsp;&nbsp;品质靠谱">
    <div class="panelMain" style="width: 74%; height: 330px; display: flex">
      <div
        class="panelMainItem"
        style="height: 100%; background-color: #e9f6ee; width: 20%"
        v-for="item in handleNewList()"
        :key="item.id"
      >
        <router-link :to="`/detail/${item.id}`">
          <img :src="item.picture" />
          <div class="itemText">
            <div
              class="name"
              style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                font-size: 18px;
              "
            >
              {{ item.name }}
            </div>
            <div
              class="price"
              style="
                color: red;
                font-size: 18px;
                width: 100%;
                display: flex;
                justify-content: center;
              "
            >
              ￥{{ item.price }}
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </HomePanel>
</template>



<style scoped>
.panelMainItem {
  margin-right: 6.66%;
}
.panelMainItem:last-child {
  margin: 0;
}
</style>